<template>
  <div>
    <div
      v-if="isShow"
      ref="ref_wrap"
      class="wrap"
      :class="getWrapClass()"
      @dblclick="doubleClick()"
      @click="fullScreen()"
    >
      <!-- <canvas id="nestInsideMonitor"/> -->
      <video-view
        ref="ref_video_inside"
        :url="liveUrl"
        view-id="nestVideoInside"
        style="width: 100%; height: 100%"
      />
      <video-action-bar
        v-if="fullScreenComp !== 3"
        :title="title"
        @fullScreen="fullScreen"
        @hideScreen="hideScreen"
        @refreshComp="refreshComp"
      />
    </div>
    <!---->
    <svg-icon
      v-if="hide"
      class="btn_show"
      :class="getBtnClass()"
      @click="showScreen"
      icon-class="video2"
    ></svg-icon>
  </div>
</template>

<script>
import VideoActionBar from "@/views/components/NestAndAircraftSubComps/baseComps/VideoActionBar";
import VideoView from "@/views/components/NestAndAircraftSubComps/baseComps/VideoView";

import { startPushVideo } from "@/api/kanban";
export default {
  name: "NestVideoInsideComp",
  components: { VideoView, VideoActionBar },
  props: {
    isShow: {
      type: Boolean,
      default: () => true,
    },
    liveUrl: {
      type: String,
      default: () => "",
    },
    title: {
      type: String,
      default: () => " ",
    },
    fullScreenComp: {
      type: Number,
      default: () => 0,
    },
    isShowAircraftComp: {
      type: Boolean,
      default: () => true,
    },
    nestInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      hide: false,
    };
  },
  methods: {
    getWrapClass() {
      if (this.fullScreenComp === 3) {
        return "wrap_full";
      } else if (this.hide) {
        return "wrap_hide";
      } else {
        return this.isShowAircraftComp ? "wrap_window" : "wrap_window2";
      }
    },
    getBtnClass() {
      return this.isShowAircraftComp ? "btn_pot1" : "btn_pot2";
    },
    /**
     * 用户操作
     */
    changeResolution() {
      this.$message("切换清晰度");
    },
    // refreshComp() {
    //   this.$message('刷新')
    // },
    rotateVideo() {
      this.$message("旋转视频");
    },
    fullScreen() {
      this.$bus.emit("change_full_screen", 3);
    },
    refreshComp() {
      // this.$refs.ref_video_inside?.refreshComp()

      startPushVideo({
        user_id: this.$store.getters.userId,
        nest_code: this.nestInfo?.nest_code,
        factory: this.nestInfo?.nest_factory_code,
        action: 0,
      })
        .then((res) => {
          this.$refs.ref_video_inside.refreshComp();
        })
        .catch((err) => {
          this.$refs.ref_video_inside.refreshComp();
        });
    },
    hideScreen() {
      this.hide = true;
    },
    showScreen() {
      this.hide = false;
    },
    doubleClick() {
      if (this.fullScreenComp === 3) {
        this.$bus.emit("doubleClick");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  caret-color: transparent;
}

::v-deep .prism-big-play-btn {
  display: none !important;
}

::v-deep .prism-ErrorMessage {
  display: none !important;
}

.wrap_full {
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: calc(100% - 20px);
  z-index: 1;
}

.wrap_hide {
  width: 1px;
  height: 1px;
}

.wrap_window {
  width: 320px;
  height: 200px;
  //width: 450px;
  //height: 260px;
  bottom: 450px;
  right: 360px;
  z-index: 999;
}

.wrap_window2 {
  width: 320px;
  height: 200px;
  //width: 450px;
  //height: 260px;
  bottom: 450px;
  right: 20px;
  z-index: 999;
}

.btn_show {
  pointer-events: all;
  position: absolute;
  width: 40px;
  height: 40px;
}

.btn_pot1 {
  pointer-events: all;
  bottom: 450px;
  right: 360px;
  z-index: 999;
}

.btn_pot2 {
  bottom: 450px;
  right: 20px;
  z-index: 999;
}

.wrap {
  pointer-events: all;
  position: absolute;
  display: flex;
  background-color: black;
  flex-direction: column;

  ::v-deep video {
    object-fit: fill !important;
  }

  .actionWrap {
    background: rgba(5, 29, 40, 0.6);
    position: absolute;
    bottom: 0;
    display: flex;
    color: white;
    padding: 5px;
    width: 100%;
    align-items: center;
    flex-direction: row;

    .btn {
      background: none;
      padding: 2px 5px;
      margin: 0;
      border: none;

      .svg-icon {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>
